<template>
<div>
     

       <div class="odiv">
        <ul class="oul" @click='foothide'>
            <li v-for='item of list'  :key='item.id'> 
                <router-link :to='`/onedetail/${item.id}`' >
                <img :src="item.imageUrls[0]" alt="">
                <p class="p1">{{item.title}}</p>
                <p class="p2">{{item.price}}</p>
                </router-link>
            </li>
        </ul>


    </div>
</div>
 
</template>

<script>
export default {
 data() {
    return {
      list: []
    };
  },
  methods:{
      foothide(){
        this.$store.commit('getisflag',false)
      }
  },
  created() {
    this.$axios.get("static/xiaomi.json").then(redata => {
      console.log(redata);
      this.list=redata.data.data;
      console.log(this.$store.state.list1)
    this.$store.state.list1=this.list;
      console.log(this.list)
    });
  },
}
</script>

<style lang='scss' scoped>
body,html{
    height: 100%;
    width: 100%;
}
$appwidth:375;


@function pxtovw($p){
    @return (100/$appwidth*$p) * 1vw;
}
h2{
        color: #222;
        text-align: center;
        height: pxtovw(40);
        line-height: pxtovw(40);
    }
.odiv{
    
    width: 100%;
    height: 100%;
    background: #eee;
    //   position: absolute;
    //   margin-top:pxtovw(110); 
    ul{
         width: 100%;
         height: 100%;
            li{
                width:49%;
                float: left;
                // height: pxtovw(210);

                img{
                    width:100%;
                    height: pxtovw(180);
                }
                p{
                    font-size: pxtovw(14);
                    color: #333;
                    
                }
              a{
                  text-decoration: none;
              }
                .p2{
                    color: orange;
                    text-align: center;
                }

            }
            li:nth-child(2n){
                margin-left:pxtovw(5); 
            }
    }

}

</style>
